<script setup lang="ts">
import { ref } from 'vue';
//@ts-ignore
import Header from '../components/Header.vue';
//@ts-ignore
import Footer from '../components/Footer.vue';

// 航班数据
const flights = ref([
  {
    id: 1,
    airline: '中国国际航空',
    flightNo: 'CA1234',
    departure: '北京首都 (PEK)',
    arrival: '上海虹桥 (SHA)',
    departureTime: '08:30',
    arrivalTime: '10:45',
    duration: '2h15m',
    price: '¥680',
    aircraft: '空客 A330',
    seatsLeft: 5
  },
  {
    id: 2,
    airline: '东方航空',
    flightNo: 'MU5678',
    departure: '上海浦东 (PVG)',
    arrival: '广州白云 (CAN)',
    departureTime: '14:20',
    arrivalTime: '16:50',
    duration: '2h30m',
    price: '¥550',
    aircraft: '波音 737',
    seatsLeft: 12
  },
  {
    id: 3,
    airline: '南方航空',
    flightNo: 'CZ9876',
    departure: '深圳宝安 (SZX)',
    arrival: '成都天府 (TFU)',
    departureTime: '18:00',
    arrivalTime: '20:30',
    duration: '2h30m',
    price: '¥720',
    aircraft: '空客 A320',
    seatsLeft: 3
  },
  {
    id: 4,
    airline: '海南航空',
    flightNo: 'HU4321',
    departure: '西安咸阳 (XIY)',
    arrival: '三亚凤凰 (SYX)',
    departureTime: '09:45',
    arrivalTime: '12:55',
    duration: '3h10m',
    price: '¥890',
    aircraft: '波音 787',
    seatsLeft: 8
  },
  {
    id: 5,
    airline: '四川航空',
    flightNo: '3U6543',
    departure: '重庆江北 (CKG)',
    arrival: '拉萨贡嘎 (LXA)',
    departureTime: '06:30',
    arrivalTime: '09:15',
    duration: '2h45m',
    price: '¥1120',
    aircraft: '空客 A319',
    seatsLeft: 2
  }
]);

// 搜索条件
const searchParams = ref({
  departure: '',
  arrival: '',
  date: '',
  passengers: 1,
  cabinClass: '经济舱'
});

// 机场列表
const airports = ref([
  '北京首都 (PEK)',
  '上海虹桥 (SHA)',
  '上海浦东 (PVG)',
  '广州白云 (CAN)',
  '深圳宝安 (SZX)',
  '成都天府 (TFU)',
  '西安咸阳 (XIY)',
  '三亚凤凰 (SYX)',
  '重庆江北 (CKG)',
  '拉萨贡嘎 (LXA)'
]);

// 舱位等级
const cabinClasses = ref([
  '经济舱',
  '超级经济舱',
  '商务舱',
  '头等舱'
]);

// 筛选航班
const filteredFlights = () => {
  return flights.value.filter(flight => {
    const matchesDeparture = searchParams.value.departure ? 
      flight.departure.includes(searchParams.value.departure) : true;
    const matchesArrival = searchParams.value.arrival ? 
      flight.arrival.includes(searchParams.value.arrival) : true;
    return matchesDeparture && matchesArrival;
  });
};
</script>

<template>
  <div class="flight-page">
    <Header />
    
    <!-- 搜索区 -->
    <div class="search-section">
      <div class="container">
        <div class="search-box">
          <div class="search-form">
            <div class="form-group">
              <label>出发地</label>
              <input 
                type="text" 
                v-model="searchParams.departure"
                placeholder="请输入出发城市或机场"
                list="airportList"
              >
            </div>
            <div class="form-group">
              <label>目的地</label>
              <input 
                type="text" 
                v-model="searchParams.arrival"
                placeholder="请输入到达城市或机场"
                list="airportList"
              >
            </div>
            <div class="form-group">
              <label>出发日期</label>
              <input type="date" v-model="searchParams.date">
            </div>
            <div class="form-group">
              <label>乘客</label>
              <select v-model="searchParams.passengers">
                <option v-for="n in 9" :key="n" :value="n">{{ n }} 人</option>
              </select>
            </div>
            <div class="form-group">
              <label>舱位</label>
              <select v-model="searchParams.cabinClass">
                <option v-for="cls in cabinClasses" :key="cls" :value="cls">{{ cls }}</option>
              </select>
            </div>
            <button class="search-btn">搜索机票</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 结果区 -->
    <div class="results-section">
      <div class="container">
        <div class="flight-list">
          <div v-for="flight in filteredFlights()" :key="flight.id" class="flight-card">
            <div class="flight-header">
              <h3>{{ flight.airline }} {{ flight.flightNo }}</h3>
              <span class="seats-left" v-if="flight.seatsLeft < 5">仅剩 {{ flight.seatsLeft }} 张</span>
            </div>
            
            <div class="flight-details">
              <div class="time-info">
                <div class="departure">
                  <div class="time">{{ flight.departureTime }}</div>
                  <div class="airport">{{ flight.departure }}</div>
                </div>
                <div class="duration">
                  <div class="plane-icon">🛫</div>
                  <div class="duration-text">{{ flight.duration }}</div>
                </div>
                <div class="arrival">
                  <div class="time">{{ flight.arrivalTime }}</div>
                  <div class="airport">{{ flight.arrival }}</div>
                </div>
              </div>
              
              <div class="price-info">
                <div class="price">{{ flight.price }}</div>
                <button class="book-btn">立即预订</button>
              </div>
            </div>
            
            <div class="flight-footer">
              <span class="aircraft">{{ flight.aircraft }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <Footer />
    <datalist id="airportList">
      <option v-for="airport in airports" :key="airport" :value="airport"></option>
    </datalist>
  </div>
</template>

<style scoped>
.search-section {
  background-color: #f5f7fa;
  padding: 40px 0;
}

.search-box {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 15px rgba(0,0,0,0.1);
  padding: 30px;
}

.search-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  align-items: end;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-size: 14px;
  color: #666;
}

.form-group input, 
.form-group select {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 100%;
}

.search-btn {
  background: #0066cc;
  color: white;
  border: none;
  padding: 12px 25px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

.search-btn:hover {
  background: #0055aa;
}

.results-section {
  padding: 40px 0;
}

.flight-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.flight-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  padding: 20px;
}

.flight-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}

.seats-left {
  color: #e74c3c;
  font-size: 14px;
  font-weight: 500;
}

.flight-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.time-info {
  display: flex;
  align-items: center;
  gap: 30px;
  flex: 1;
}

.departure, .arrival {
  text-align: center;
}

.time {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.airport {
  color: #666;
  font-size: 14px;
}

.duration {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #666;
}

.plane-icon {
  font-size: 24px;
  margin-bottom: 5px;
}

.price-info {
  text-align: right;
  min-width: 200px;
}

.price {
  font-size: 24px;
  color: #0066cc;
  font-weight: bold;
  margin-bottom: 10px;
}

.book-btn {
  background: #0066cc;
  color: white;
  border: none;
  padding: 10px 25px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

.book-btn:hover {
  background: #0055aa;
}

.flight-footer {
  color: #666;
  font-size: 14px;
  border-top: 1px solid #eee;
  padding-top: 15px;
}
</style> 